﻿@{
    ViewData["Title"] = "Index";
    Layout = null;
}

<link href="~/libs/layui-v2.5.6/layui/css/layui.css" rel="stylesheet" />

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewData["Title"]</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
            background-color: #f9f9f9;
        }

        th, td {
            border: 1px solid #ddd;
            padding: 10px;
            text-align: left;
        }

        th {
            background-color: #f4f4f4;
            font-weight: bold;
        }

        .toolbar {
            margin-bottom: 10px;
        }

            .toolbar input[type="text"], .toolbar select {
                margin-right: 10px;
            }

            .toolbar button {
                margin-right: 5px;
                background-color: #007bff;
                color: white;
                border: none;
                padding: 8px 12px;
                cursor: pointer;
                border-radius: 4px;
            }

                .toolbar button:hover {
                    background-color: #0056b3;
                }

        .actions button {
            background-color: #dc3545;
            color: white;
            border: none;
            padding: 5px 10px;
            cursor: pointer;
            border-radius: 4px;
        }

            .actions button:hover {
                background-color: #c82333;
            }
    </style>
</head>
<body>

    <h2>供应商管理</h2>
    <br />
    <div class="toolbar">
        <label>所属客户：</label>
        <select id="customer">
            <option value="">请选择客户</option>
            <!-- 动态填充 -->
        </select>
        <button id="searchButton">查询</button>
    </div>

    <table id="mainData" lay-filter="mainData" style="margin-top: 10px; width: 100%;">
    </table>

    <script src="~/libs/jquery/jquery.js"></script>
    <script src="~/libs/layui-v2.5.6/layui/layui.all.js"></script>

    <script>
        layui.use(['table', 'form'], function () {
            var table = layui.table;
            var form = layui.form;

            // 初始化下拉框
            function loadCustomerOptions() {
                $.ajax({
                    url: '/BinLocationDefinition/GetClient', // 修改为对应的接口地址
                    type: 'GET',
                    success: function (res) {
                        var options = "";
                        res.data.forEach(function (item) {
                            options += `<option value="${item.chineseName}">${item.chineseName}</option>`;
                        });
                        $("#customer").append(options);
                        form.render('select');
                    }
                });
            }

            // 渲染数据表格
            function showData() {
                table.render({
                    elem: '#mainData',
                    url: '/BinLocationDefinition/GetEmptySpace',
                    method: 'get',
                    where: {
                        customer: $("#customer").val()
                    },
                    page: true,
                    limit: 10,
                    cols: [[
                        { field: 'repositoryId', title: '仓库', width: 120, sort: true, align: 'center' },
                        { field: 'theLocationType', title: '库位类型', width: 120, align: 'center' },
                        { field: 'theLocationCode', title: '库位编码', width: 120, align: 'center' },
                        { field: 'customer', title: '所属客户', width: 120, align: 'center' },
                        { field: 'maxVolume', title: '最大体积', width: 120, align: 'center' },
                        { field: 'listingOrder', title: '上架次序', width: 120, align: 'center' },
                        { field: 'wide', title: '宽度', width: 120, align: 'center' },
                        { field: 'long', title: '长度', width: 120, align: 'center' },
                        { field: 'high', title: '高度', width: 120, align: 'center' },
                        { field: 'largestPallets', title: '最大托盘', width: 120, align: 'center' },
                    ]],
                    parseData: function (res) {
                        console.log(res)
                       return {
                            code: res.code,
                            count: res.count,
                            data: res.data
                        };
                    },
                });
            }

            showData()

            loadCustomerOptions();

            // 查询
            $("#searchButton").on("click", function () {
                showData();
            });

        });
    </script>

</body>
</html>
